<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 
.wrap{
	font-size: 12px;
	margin:40px auto;
	width:340px;
}
.ui-slider-tooltip{	/* CSS属性顺序按照 字母首字母 排列*/
	background:#FCFDFD; 
	border:1px solid green;
	color:#222222;
	display: block;
	text-align: center;
	padding: 5px 3px 5px 3px;
	width: 80px;	
	position: relative; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	bottom:	-8px;
	display: block;
	height:0;
	left: 50%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}

.ui-tooltip-pointer-down-inner {
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	left: -6px;
	top: -9px;
	position: absolute; 
}


/**/
.a{
	display: block;width:0;height:0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	border-bottom: 0;
	position: absolute;
}
.b{
	position: absolute; 
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	top: -9px;
	left: -6px;
}
</style>
</head>
<body>


<div class="wrap">
	<h1>第三步：把小三角透明</h1>
	
	<p>第二步我们已经实现了一个实心的倒三角，那么我们可不可以在当前span原理里在做一个 实心的 ，背景色为白色的 ，宽度小 1px 的倒三角呢？通过定位方式使用这个新的倒三角 把 原来那个 遮住，从而留下1px或者更大像素的宽度。结果不就看起来就像一个透明的倒三角了。</p>


	<span class="a">
		<span class="b"></span>
	</span>
	<br/>
	<span class="a">
		<span class="b" style="top:-11px;"></span>
	</span>
	<br/>


	<span class="ui-slider-tooltip  ui-corner-all">
		<span>0元</span>
		<span class="ui-tooltip-pointer-down">
			<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>

	<br/>

	<span class="ui-slider-tooltip  ui-corner-all">
		<span>1000元</span>
		<span class="ui-tooltip-pointer-down">
			<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>



	<p>加个背景颜色，你也许更能看清楚其中的奥秘。看到小三角上的白色了吧！！</p>

</div>

<div class="wrap" style="background:#ccc;">
	<span class="a">
		<span class="b"></span>
	</span>
	<br/>
	<span class="a">
		<span class="b" style="top:-11px;"></span>
	</span>
	<br/>

	<span class="ui-slider-tooltip ui-widget-content ui-corner-all">
		<span>0元</span>
		<span class="ui-tooltip-pointer-down">
			<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>

	<br/>

	<span class="ui-slider-tooltip ui-widget-content ui-corner-all">
		<span>1000元</span>
		<span class="ui-tooltip-pointer-down">
			<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>

	<p>相信大家也看明白是怎么实现1px边框的了。</p>
	<p>通过在当前span元素里再做一个新span元素，新的span元素跟他一样，也是倒三角，样式几乎一样，只不过border的宽度稍微 小 1px，同时新的span元素的背景色是白色，这样就可以把原本为绿色的 大 1px的 倒三角 遮住，只留下 1px 的 绿线 。里面的span元素 top 越小，遮住的就越少，显示出来的border也就越大。
	</p>
</div>

<div class="wrap" style="text-align:right;">
	<p>Dev By <a href="http://www.cssrain.cn" >CssRain.cn</a></p>
</div>
</body>
</html>

